import * as echarts from 'echarts'
import { onMounted } from 'vue'
import { onUnmounted } from 'vue'

export function useIndustryChart() {
  let myChart: echarts.ECharts | null = null

  const plantCap = [
    {
      name: '5A社会组织',
      value: '5'
    },
    {
      name: '4A社会组织',
      value: '15'
    },
    {
      name: '3A社会组织',
      value: '180'
    },
    {
      name: '失信法人',
      value: '0'
    }
  ]
  const datalist = [
    {
      offset: [56, 48],
      symbolSize: 110,

      color: 'rgba(73,188,247,.14)'
    },
    {
      offset: [30, 70],
      symbolSize: 70,
      color: 'rgba(73,188,247,.14)'
    },
    {
      offset: [0, 43],
      symbolSize: 60,
      color: 'rgba(73,188,247,.14)'
    },
    {
      offset: [93, 30],
      symbolSize: 70,
      color: 'rgba(73,188,247,.14)'
    },
    {
      offset: [26, 19],
      symbolSize: 65,
      color: 'rgba(73,188,247,.14)'
    },
    {
      offset: [75, 75],
      symbolSize: 60,
      color: 'rgba(73,188,247,.14)'
    }
  ]

  const datas: any[] = []
  for (let i = 0; i < plantCap.length; i++) {
    const item = plantCap[i]
    const itemToStyle = datalist[i]
    datas.push({
      name: item.value + '\n' + item.name,
      value: itemToStyle.offset,
      symbolSize: itemToStyle.symbolSize,
      label: {
        normal: {
          textStyle: {
            fontSize: 14
          }
        }
      },

      itemStyle: {
        normal: {
          color: itemToStyle.color,
          opacity: itemToStyle.opacity
        }
      }
    })
  }
  const option = {
    grid: {
      show: false,
      top: 10,
      bottom: 10
    },

    xAxis: [
      {
        gridIndex: 0,
        type: 'value',
        show: false,
        min: 0,
        max: 100,
        nameLocation: 'middle',
        nameGap: 5
      }
    ],

    yAxis: [
      {
        gridIndex: 0,
        min: 0,
        show: false,
        max: 100,
        nameLocation: 'middle',
        nameGap: 30
      }
    ],
    series: [
      {
        type: 'scatter',
        symbol: 'circle',
        symbolSize: 120,
        label: {
          normal: {
            show: true,
            formatter: '{b}',
            color: '#FFF',
            textStyle: {
              fontSize: '30'
            }
          }
        },
        itemStyle: {
          normal: {
            color: '#F30'
          }
        },
        data: datas
      }
    ]
  }

  onMounted(() => {
    setTimeout(() => {
      createChart()
    }, 200)
  })

  onUnmounted(() => {
    myChart?.dispose()
    window.removeEventListener('resize', resize)
  })

  function createChart() {
    myChart = echarts.init(document.getElementById('echarts4'))
    myChart.setOption(option)
    window.addEventListener('resize', resize)
  }

  function resize() {
    setTimeout(() => {
      myChart?.resize()
    }, 200)
  }
}
